<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>列表组</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#link a").click(function () {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            });

            $("#button button").click(function () {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            });
        });
    </script>
</head>
<body>
<div class="container">
    <h5 class="page-header">1.基本实例(.list-group,.list-group-item)</h5>
    <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>


    <h5 class="page-header">2.徽章</h5>
    <!--给列表组加入徽章组件，它会自动被放在右边。-->
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">14</span>
            Cras justo odio
        </li>
        <li class="list-group-item">
            <span class="badge">2</span>
            Dapibus ac facilisis in
        </li>
        <li class="list-group-item">
            <span class="badge">1</span>
            Morbi leo risus
        </li>
    </ul>


    <h5 class="page-header">3.链接(div取代ul,a取代li)</h5>
    <div class="list-group" id="link">
        <a href="#" class="list-group-item active">Cras justo odio</a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>

    <h5 class="page-header">4.按钮(div取代ul,a取代li)</h5>
    <div class="list-group" id="button">
        <button type="button" class="list-group-item active">Cras justo odio</button>
        <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
        <button type="button" class="list-group-item">Morbi leo risus</button>
        <button type="button" class="list-group-item">Porta ac consectetur ac</button>
        <button type="button" class="list-group-item">Vestibulum at eros</button>
    </div>

    <h5 class="page-header">5.被禁用的条目(.disabled)</h5>
    <ul class="list-group">
        <li class="list-group-item disabled">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

    <h5 class="page-header">6.情境类(.list-group-item-success)</h5>
    <!--为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态-->
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">Cras justo odio</li>
        <li class="list-group-item list-group-item-info">Dapibus ac facilisis in</li>
        <li class="list-group-item list-group-item-warning">Morbi leo risus</li>
        <li class="list-group-item list-group-item-danger">Porta ac consectetur ac</li>
    </ul>

    <h5 class="page-header">7.定制内容(.list-group-item-heading,.list-group-item-text)</h5>
    <!--列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。-->
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
            </p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
            </p>
        </a>
        <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
            </p>
        </a>
    </div>
</div>
</body>
</html>